<template>
  <div class="el-body">
    <el-card>
      <div>
        <el-form :inline="true" :model="formInline" >
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="反馈编号" >
                <el-input v-model="formInline.qf_number" placeholder="请输入反馈编号" suffix-icon="xxxx"
                          ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="问题等级">
                <el-select v-model="formInline.level" placeholder="请选择" >
                  <el-option
                    v-for="item in params.level"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="反馈来源">
                <el-select v-model="formInline.source" placeholder="请选择">
                  <el-option
                    v-for="item in params.source"
                    :key="item.code"
                    :label="item.title"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="问题状态">
                <el-select v-model="formInline.status" placeholder="请选择"  style="width:100%">
                  <el-option
                    v-for="item in params.status"
                    :key="item.code"
                    :label="item.title"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col  :span="6">
              <el-form-item label="问题结果">
                <el-select v-model="formInline.result" placeholder="请选择">
                  <el-option
                    v-for="item in params.result"
                    :key="item.code"
                    :label="item.title"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col  :span="10">
              <el-form-item label="选择时间">
                  <CustomDate :type.sync='formInline.date_type' v-model="formInline.date"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col >
              <el-form-item>
                <el-button type="primary" @click="reload"  class="ele-btn-icon" icon="el-icon-search">查询</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button  icon="el-icon-upload2" :loading="exportLoading" @click="exportAll">导出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table
        :height="'calc(100vh - 400px)'"
        v-loading="loading"
        :cell-style="rowStyle"
        :header-cell-style="headerStyle"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="50"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="qf_number"
          label="反馈编号"
          min-width="180">
        </el-table-column>
        <el-table-column
          prop="order_number"
          label="订单号"
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="user_name"
          label="反馈者"
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="manager_name"
          label="区域经理"
          width="200">
          <el-table-column
            prop="manager_name"
            label="负责人"
            width="80">
          </el-table-column>
          <el-table-column
            prop="manager_action_time"
            label="处理时间"
            min-width="200">
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="date"
          label="品质部"
          width="200">
          <el-table-column
            prop="quantity_user_name"
            label="工程师"
            width="80">
          </el-table-column>
          <el-table-column
            prop="quantity_action_time"
            label="处理时间"
            min-width="200">
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop=""
          label="解决状态"
          width="200">
          <el-table-column
            prop="resolved"
            label="是否解决"
            width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.resolved?'是':'否' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="resolve_time"
            label="解决时间"
            min-width="200">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="问题归类"
          width="200">
          <el-table-column
            prop="question_type"
            label="分类"
            width="80">
          </el-table-column>
          <el-table-column
            prop="question_type_detail"
            label="细分"
            width="120">
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="date"
          label="问题结果"
          width="200">
          <el-table-column
            prop="is_close"
            label="是否关闭"
            width="80">
            <template slot-scope="scope">
                <span>{{ scope.row.closed?'是':'否' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="close_time"
            label="关闭时间"
            min-width="200">
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="question_level"
          label="问题等级"
          width="120">
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="120">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="toDetail(scope.row.id)"
              size="small"
            >
              详情
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import CustomDate from '@/views/reports/workorder-monitoring/components/CustomDate.vue'
export default {
  components: {CustomDate},
  data() {
    return {
      TableHeight:'',
      params:{},
      loading: true,
      total: 400,
      formInline: {},
      tableData: [],
      pageSize:10,
      page:1,
      exportLoading:false
    }
  },
  watch:{
    pageSize(){
      this.init()
    },
    page(){
      this.init()
    },
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize=val
    },
    handleCurrentChange(val) {
      this.page=val
    },
    reload( ) {
      this.init()
    },
    resetForm() {
      this.formInline={}
      this.page=1
      this.pageSize=10
      this.init()
    },
    rowStyle({columnIndex,column}) {
      if((columnIndex%2===1&&column.level===1||(column.property!=="manager_name"&&column.property!=="manager_action_time"&&column.property!=="resolved"&&column.property!=="resolve_time"&&column.property!=="is_close"&&column.property!=="close_time")&&column.level===2)&&column.label!=='操作'||column.label==='问题等级'){
        return "background:#f5f5f5;text-align:center";
      }else {
        return "text-align:center";
      }

    },
    headerStyle({columnIndex,column}){
      if((columnIndex%2===1&&column.level===1||(column.property!=="manager_name"&&column.property!=="manager_action_time"&&column.property!=="resolved"&&column.property!=="resolve_time"&&column.property!=="is_close"&&column.property!=="close_time")&&column.level===2)&&column.label!=='操作'){
        return "background:#f5f5f5;text-align:center";
      }else {
        return "text-align:center";
      }
    },
    toDetail(id) {
      this.$router.push({
        path: `/qualityFeedback/qualityFeedback/info?id=${id}`
      })
    },
    init(val) {
      if (this.formInline.date?.length) {
        this.formInline.month_start = this.formInline.date[0]
        this.formInline.month_end = this.formInline.date[1]
      }
      let url='/question_feedback'
      if(val){
        url='/question_feedback?export=1'
        this.exportLoading=true
      }else {
        this.loading = true
      }
      this.$http.get(url,{
        params:{limit:this.pageSize,page:this.page,...this.formInline}
      }).then(res => {
        this.loading = false;
        if (res.data.code === 0) {
          if(val){
            this.$message.success(res.data.msg);
            const link = document.createElement('a')
            //_blank表示在新窗口打开链接
            // link.target = '_blank'
            link.href = res.data.data
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            this.exportLoading=false
          }else {
            this.tableData = res.data.data
            this.total=res.data.count
          }
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    getParams() {
      this.loading = true
      this.$http.get(`/question_feedback/params`).then(res => {
        this.loading = false;
        if (res.data.code === 0) {
          this.params = res.data.data
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
     exportAll(){
       this.init(1)
    }
  },
  mounted() {
    this.getParams()
    this.init()
  },
  created() {
    //动态计算表格高度
    let windowHeight = document.documentElement.clientHeight || document.bodyclientHeight;
    this.TableHeight = windowHeight - 250;//数值"140"根据需要调整
  }
  }
</script>
<style scoped lang="scss">
@import "src/styles/conversion.scss";
.el-card {
  height: 100%;
}
.el-row ::v-deep  .el-input__inner {
  //min-width: 200px !important;
}

.el-body {
  box-sizing: border-box;
  padding: px2vh(20) px2vw(20);
  //min-height:100%;
  position: relative;

}

.block {
  margin-top: px2vh(20);
  background-color: #fff;

}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active{
  border-radius: 50%;
}
::v-deep.el-pagination.is-background .el-pager li{
  background: #fff;
}
::v-deep.el-pagination.is-background .btn-prev:disabled{
  background: #fff;
}
::v-deep.el-pagination.is-background .btn-next{
  background: #fff;
}
</style>

